<template>
<div>
   <router-link to="/layout/student">
  <div style="font-weight:bold;font-size:18px;line-height:60px;margin-left:30px" class="biaoti"><img src="../../../assets/shugang.png" alt="">&emsp;学员信息</div>
  </router-link>
  <table class="table">
     <thead>
      <tr>
        <td width="60px" class="one" style="font-weight:bold">顺序</td>
        <td width="100px" style="font-weight:bold">姓名</td>
        <td width="150px" style="font-weight:bold">手机</td>
        <td width="100px" style="font-weight:bold">消费金额</td>
        <td width="100px" style="font-weight:bold">会员等级</td>
      </tr>
     </thead>
     <tbody>
      <tr v-for="(item,index) in arr" :key="item.id">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.phone}}</td>
        <td>{{item.pay}}</td>
        <td>{{item.level}}</td>
      </tr>
     </tbody>
  </table>
</div>
</template>

<script>
export default {
    data(){
      return{
        arr:[
          {id:1,name:'菲菲',phone:'18854138769',pay:'3366.00',level:3},
          {id:2,name:'晚晚',phone:'18498444769',pay:'1366.00',level:1},
          {id:3,name:'萌萌',phone:'18854138741',pay:'4399.00',level:4},
          {id:4,name:'丽丽',phone:'17854138754',pay:'2366.00',level:2},
          {id:5,name:'明明',phone:'18424138753',pay:'5399.00',level:5},
          {id:6,name:'倩倩',phone:'15138666194',pay:'3366.00',level:3},
        ]
      }
    }
}
</script>

<style lang="less" scoped>
   .table{
    text-align: center;
    margin-left: 60px;
     tr{
        border-bottom: 1px solid #F1F1F1;
        td{
          padding: 10px 10px;
        }
     }
     thead{
      font-weight:bold !important;
      font-size:18px;
     }
   }
   .biaoti:hover{
      color:#558BFD
     }
     .biaoti{
      margin-bottom: 10px;
     }
</style>